<template lang="html">
    <div class="box">

      <div class="t_header">
          <el-form :inline="true" label-width="100px" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="supplierName" placeholder="供应商姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="el_button" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="body">
        <el-table :data="tableData.list" style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="name" label="供应商姓名" width="">
            <template slot-scope="scope">
                <el-popover placement="right" trigger="hover" @show="getUserInfo(scope.row)">
                  <p><img class="user_avatar" :src="userInfo.head_pic" alt=""></p>
                  <p>姓名：{{userInfo.name}}</p>
                  <p>手机号：{{userInfo.phone}}</p>
                  <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.name}}</el-button>
                </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="地区" width="">
              <template slot-scope="scope">
  <p>{{scope.row.province}}-{{scope.row.city}}</p>
</template>
          </el-table-column>
          <el-table-column align="center" prop="goods_brand" label="产品品牌" width=""></el-table-column>
          <el-table-column align="center" prop="goods_name" label="服务项名称" width=""></el-table-column>
          <el-table-column align="center" label="产品详情">
            <template slot-scope="scope">
              <el-button @click="onshow(scope.row)" size="mini" type="primary" plain>查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :page-count="tableData.rows"
          :current-page="currentPage"
           @current-change="changePage" align="center">
        </el-pagination>
      </div>

      <el-dialog :visible.sync="dialogVisible" title="产品详情">
        <el-table :data="detailData">
          <el-table-column align="center" width="" property="name" label="产品品牌"></el-table-column>
          <el-table-column align="center" width="" label="产品型号">
            <template slot-scope="scope">
              <p v-for="item in scope.row.detail">{{item.standard}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" width="" property="price" label="结算价">
            <template slot-scope="scope">
              <p v-for="item in scope.row.detail">{{item.price}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" width="" property="info" label="产品详情"></el-table-column>
          <el-table-column align="center" label="质量保证书(图片)">
            <template slot-scope="scope">
              <img preview="0" class="preview-img" :src="scope.row.quality_certificate" alt="">
            </template>
          </el-table-column>
          <el-table-column align="center" label="质检报告（图片）">
            <template slot-scope="scope">
              <img preview="0" class="preview-img" :src="scope.row.quality_certificate" alt="">
            </template>
          </el-table-column>
          <el-table-column align="center" label="质量承保书（图片）">
            <template slot-scope="scope">
              <img preview="0" class="preview-img" :src="scope.row.quality_certificate" alt="">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      supplierName: '',
      tableData: [],
      dialogVisible:false,
      userInfo: [],
      currentPage:1,
      detailData: []
    }
  },
  created () {
    this.getFreeIndexList()
    this.$preview.on('imageLoadComplete',(e,item)=>{
    	this.$preview.self.template.style.zIndex = 99999
    })
  },
  methods: {
    getFreeIndexList (page = 1) {
      this.loading = true;
      this.currentPage = page;
      this.$http2.getFreeIndexList({
        sm_name: this.supplierName,
        page: page
      })
        .then(res => {
          this.loading = false;
          this.tableData = res.data.code == 1 ?
            res.data.data : []
        })
    },
    getUserInfo (e) {
      this.$http2.getSmUserInfo({
        sm_id: e.id
      }).then(res => {
        this.userInfo = res.data.data
      })
    },
    onSubmit () {
      this.getFreeIndexList()
    },
    onshow (e) {
      this.dialogVisible = true
      this.$http2.getSmAreaDetail({
        sm_id: e.id,
        area: e.area,
        type: 'free'
      }).then(res => {
        this.detailData = res.data.data;
        this.$previewRefresh()
      })
    },
    changePage (e) {
      this.getFreeIndexList(e)
    },

  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
.user_avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: block;
}
.preview-img {
  display: block;
  width: 100%;
  height: 30px;
}
</style>
